<!doctype html>
<html lang="zh-CH">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    <title>木投网--商城</title>
    <link rel="stylesheet" href="/resource/css/mt_index.css">
    <link rel="stylesheet" href="/resource/css/mt_shopping.css">
</head>
<body>
<!-- 顶部 -->

<!-- 导航 -->
@include('common.shop_head')
<!-- 分类搜索 -->
<div class="shop-classify main">
    <div class="title">当前位置：
        <a href="/">首页</a>&#62<a href="/shopping">商城</a>
    </div>
    <div class="classify-info">
        <div class="classify-bor"></div>
        <dl>
            <dt><a href="javascript:;">分类</a></dt>
            <dd>
                <a href="javascript:;" class="active">全部</a>
                @foreach($first as $v)
                <a href="javascript:;" rel="{{$v->cate_id}}">{{$v->cate_name}}</a>
                    @endforeach
            </dd>
        </dl>
        <dl>
            <dt><a href="javascript:;">产地</a></dt>
            <dd>
                <a href="javascript:;" class="active">全部</a>
                @foreach($second as $v1)
                <a href="javascript:;" rel="{{$v1->cate_id}}">{{$v1->cate_name}}</a>
                    @endforeach
            </dd>
        </dl>
        <dl>
            <dt><a href="javascript:;">品名</a></dt>
            <dd>
                <a href="javascript:;" class="active">全部</a>
                @foreach($third as $v2)
                    <a href="javascript:;" rel="{{$v2->cate_id}}">{{$v2->cate_name}}</a>
                @endforeach

                <span>展开<i class="down"></i></span>
            </dd>
        </dl>
        <dl>
            <dt><a href="javascript:;">仓储地</a></dt>
            <dd>
                <a href="javascript:;" class="active">全部</a>
                <a href="javascript:;" rel="北京">北京</a>
                <a href="javascript:;" rel="天津">天津</a>
                <a href="javascript:;" rel="重庆">重庆</a>
                <a href="javascript:;" rel="上海">上海</a>
                <a href="javascript:;" rel="河北">河北</a>
                <a href="javascript:;" rel="山西">山西</a>
                <a href="javascript:;" rel="辽宁">辽宁</a>
                <a href="javascript:;" rel="吉林">吉林</a>
                <a href="javascript:;" rel="黑龙江">黑龙江</a>
                <a href="javascript:;" rel="江苏">江苏</a>
                <a href="javascript:;" rel="浙江">浙江</a>
                <a href="javascript:;" rel="安徽">安徽</a>
                <a href="javascript:;" rel="福建">福建</a>
                <a href="javascript:;" rel="江西">江西</a>
                <a href="javascript:;" rel="山东">山东</a>
                <a href="javascript:;" rel="河南">河南</a>
                <a href="javascript:;" rel="湖南">湖南</a>
                <a href="javascript:;" rel="广东">广东</a>
                <a href="javascript:;" rel="海南">海南</a>
                <a href="javascript:;" rel="四川">四川</a>
                <a href="javascript:;" rel="贵州">贵州</a>
                <a href="javascript:;" rel="云南">云南</a>
                <a href="javascript:;" rel="陕西">陕西</a>
                <a href="javascript:;" rel="甘肃">甘肃</a>
                <a href="javascript:;" rel="内蒙古">内蒙古</a>
                <a href="javascript:;" rel="广西">广西</a>
                <a href="javascript:;" rel="西藏">西藏</a>
                <a href="javascript:;" rel="宁夏">宁夏</a>
                <a href="javascript:;" rel="新疆">新疆</a>

                <span>展开<i class="down"></i></span>
            </dd>
        </dl>
        <div class="classify-location" id="location-ul">
            <ul>
                <li class="location-box"><img src="./resource/img/logo-01.jpg" alt=""/></li>
                <li class="location-box"><img src="./resource/img/logo-02.jpg" alt=""/></li>
                <li class="location-box"><img src="./resource/img/logo-03.jpg" alt=""/></li>
                <li class="location-box"><img src="./resource/img/logo-04.jpg" alt=""/></li>
                <li class="location-box"><img src="./resource/img/logo-05.jpg" alt=""/></li>
                <li class="location-box"><img src="./resource/img/logo-06.jpg" alt=""/></li>
                <li class="location-box"><img src="./resource/img/logo-07.jpg" alt=""/></li>
                <li class="location-box"><img src="./resource/img/logo-08.jpg" alt=""/></li>
                <li class="location-box"><img src="./resource/img/logo-09.jpg" alt=""/></li>
                <li class="location-box"><img src="./resource/img/logo-10.jpg" alt=""/></li>
                <li class="location-box"><img src="./resource/img/logo-11.jpg" alt=""/></li>
                <li class="location-box"><img src="./resource/img/logo-12.jpg" alt=""/></li>
            </ul>
        </div>
    </div>
    <div class="classify-cont">
        <div class="classify-left left">
            <div class="til">
                <a href="javascript:;" class="active" num="0">默认</a>
                <a href="javascript:;" rel="price" dis="hide" num="1">价格从低到高<i rel="top"></i></a>
                <a href="javascript:;" rel="price" dis="show" num="2">价格从高到低<i rel="bot"></i></a>
            </div>
            <div class="shopping-box" id="shopping-box">
                @if(empty($data))
                    <img src="./resource/img/shopping_no_shop.png"/>
                    @else
                    @foreach($data as $data1)
                        <div class="floor-shop">
                            <div class="shop-img">
                                <a href="/shopping_details/?product_id={{$data1->product_id}}"><img src="{{$data1->product_img}}" alt=""></a>
                            </div>
                            <div class="shop-info">
                                <a href="/shopping_details/?product_id={{$data1->product_id}}" class="name"><span>{{$data1->product_name}}</span></a>
                                <div class="price">￥{{$data1->price}}/{{$data1->unit}}</div>
                            </div>
                        </div>
                    @endforeach
                    @endif
            </div>

            <ul class="pagination"></ul>
            <!--<ul class="pagination">
                <li><a href="javascript:;">首页</a></li>
                <li><a href="javascript:;">&#60上一页</a></li>
                <li class="active"><a href="javascript:;">1</a></li>
                <li><a href="javascript:;">2</a></li>
                <li><a href="javascript:;">3</a></li>
                <li><a href="javascript:;">下一页 &#62</a></li>
                <li><a href="javascript:;">尾页</a></li>
            </ul>-->
        </div>
        <div class="classify-right left">
            <div class="til">推广商品</div>
            <div class="emphases-box">
                @foreach($ad_product as $v)
                    <div class="floor-shop">
                        <div class="shop-img">
                            <a href="/shopping_details/?product_id={{$v->product_id}}"><img src="{{$v->product_img}}" alt=""></a>
                        </div>
                        <div class="shop-info">
                            <a href="/shopping_details/?product_id={{$v->product_id}}" class="name"><span>{{$v->product_name}}</span></a>
                            <div class="price">￥{{$v->price}}/{{$v->unit}}</div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
@include('common.shop_foot')
@if($key_word)
<div id="key_word">{{$key_word}}</div>
@endif
@if($category)
<div id="category">{{$category}}</div>
@endif
@if($quality)
<div id="quality">{{$quality}}</div>
@endif
<script src="/resource/js/jquery-1.11.3.min.js"></script>
<script src="/resource/js/mt_index.js"></script>
<script src="/resource/js/jquery.kxbdmarquee.js"></script>    //滚动
<script src="/resource/js/jquery.page.js"></script> //分页
<script>
    //图片滚动
    $("#location-ul").kxbdMarquee({ direction: "left", scrollDelay: 30 });
    //导航 商品全部 隐藏显示
    var $allW = $('.all-wrap');
    $allW.hide();
    $('.nav .nav-all').attr('rel','hide');
    $('.nav .nav-all').click(function(){
        if($(this).attr('rel') == 'hide'){
            $(this).attr('rel','show');
            $allW.show();
        }else{
            $(this).attr('rel','hide');
            $allW.hide();
        };
    });
    //分类dl切换

    $('.shop-classify .title').html('').css('height','15px');
    $(document).delegate('.classify-info a','click',function(){
        var str ="";
        var strdl = '<a href=\"javascript:;\" class=\"active\">全部</a>';
        var strS=strdl,strT=strdl;
        var $this = $(this);
        $this.addClass('active').siblings().removeClass('active');

        if($this.parents('dl').index() == 1){
            var one = $('.classify-info dl').eq(0).find('.active').attr('rel');
            $.ajax({
                url : '/shopping',
                type : "POST",
                data : {one:one,two:two,three:three,storage:storage,price:price},
                dataType : "json",
                cache:"false",
                timeout:30000,
                success : function(json) {
                    $.each(json.second,function(index,arr){
                        strS +="<a href=\"javascript:;\" rel="+arr.cate_id+">";
                        strS += arr.cate_name;
                        strS +="</a>";
                    });
                    $('.classify-info dl').eq(1).find('dd').html(strS);
                    $.each(json.third,function(index,arr){
                        strT +="<a href=\"javascript:;\" rel="+arr.cate_id+">";
                        strT += arr.cate_name;
                        strT +="</a>";
                    });
                    $('.classify-info dl').eq(2).find('dd').html(strT+"<span>展开<i class=\"down\"></i></span>");
                    $.each(json.data,function(index,arr){
                        str +="<div class=\"floor-shop\">";
                        str +="<div class=\"shop-img\">";
                        str +="<a href=\"/shopping_details/?product_id=";
                        str +=arr.product_id;
                        str +="\"><img src="+arr.product_img+" alt=\"\"></a>";
                        str +="</div>";
                        str +="<div class=\"shop-info\">";
                        str +="<a href=\"/shopping_details/?product_id=";
                        str +=arr.product_id;
                        str +="\" class=\"name\"><span>";
                        str += arr.product_name;
                        str += "</span></a>";
                        str +="<div class=\"price\">";
                        str += '￥'+arr.price +'/'+arr.unit;
                        str +="</div>";
                        str +="</div>";
                        str +="</div>";
                    });
                    $('.shopping-box').html(str);
                    $('.pagination').jPages({
                        containerID  : "shopping-box",
                        perPage      : 12,
                        startPage    : 1,
                        startRange   : 1,
                        midRange     : 5,
                        endRange     : 1
                    });
                    if($('.shopping-box .floor-shop').length == 0){
                        $('.shopping-box').html('<img src="./resource/img/shopping_no_shop.png"/>');
                    }
                }
            });
        }else{
            var one = $('.classify-info dl').eq(0).find('.active').attr('rel');
            var two = $('.classify-info dl').eq(1).find('.active').attr('rel');
            var three = $('.classify-info dl').eq(2).find('.active').attr('rel');
            var storage = $('.classify-info dl').eq(3).find('.active').attr('rel');
            var price = $('.classify-left .til a.active').attr('num');

            $.ajax({
                url : '/shopping',
                type : "POST",
                data : {one:one,two:two,three:three,storage:storage,price:price},
                dataType : "json",
                cache:"false",
                timeout:30000,
                success : function(json) {
                    if($this.parents('dl').index() == 1){
                        $.each(json.second,function(index,arr){
                            strS +="<a href=\"javascript:;\" rel="+arr.cate_id+">";
                            strS += arr.cate_name;
                            strS +="</a>";
                        });
                        $('.classify-info dl').eq(1).find('dd').html(strS);
                        $.each(json.third,function(index,arr){
                            strT +="<a href=\"javascript:;\" rel="+arr.cate_id+">";
                            strT += arr.cate_name;
                            strT +="</a>";
                        });
                        $('.classify-info dl').eq(2).find('dd').html(strT+"<span>展开<i class=\"down\"></i></span>");
                    }else if($this.parents('dl').index() == 2){
                        $.each(json.third,function(index,arr){
                            strT +="<a href=\"javascript:;\" rel="+arr.cate_id+">";
                            strT += arr.cate_name;
                            strT +="</a>";
                        });
                        $('.classify-info dl').eq(2).find('dd').html(strT+"<span>展开<i class=\"down\"></i></span>");
                    }
                    $.each(json.data,function(index,arr){
                        str +="<div class=\"floor-shop\">";
                        str +="<div class=\"shop-img\">";
                        str +="<a href=\"/shopping_details/?product_id=";
                        str +=arr.product_id;
                        str +="\"><img src="+arr.product_img+" alt=\"\"></a>";
                        str +="</div>";
                        str +="<div class=\"shop-info\">";
                        str +="<a href=\"/shopping_details/?product_id=";
                        str +=arr.product_id;
                        str +="\" class=\"name\"><span>";
                        str += arr.product_name;
                        str += "</span></a>";
                        str +="<div class=\"price\">";
                        str += '￥'+arr.price +'/'+arr.unit;
                        str +="</div>";
                        str +="</div>";
                        str +="</div>";
                    });
                    $('.shopping-box').html(str);
                    $('.pagination').jPages({
                        containerID  : "shopping-box",
                        perPage      : 12,
                        startPage    : 1,
                        startRange   : 1,
                        midRange     : 5,
                        endRange     : 1
                    });
                    if($('.shopping-box .floor-shop').length == 0){
                        $('.shopping-box').html('<img src="./resource/img/shopping_no_shop.png"/>');
                    }
                }
            });
        };
    });
    //分页
    $('.pagination').jPages({
        containerID  : "shopping-box",
        perPage      : 12,
        startPage    : 1,
        startRange   : 1,
        midRange     : 5,
        endRange     : 1
    });
    //价格排序
    var $priceA = $(".classify-left .til a[rel='price']");
    $priceA.hide().eq(0).show();
    $priceA.children("i[rel='bot']").css({
        'background-position':'-1064px -364px',
    });
    $priceA.children("i[rel='top']").css({
        'background-position':'-1043px -364px',
    });
    $(document).delegate('.classify-left .til a','click',function(){
        if ($(this).attr('rel') == 'price' && $(this).hasClass('active')) {
            if ($priceA.eq(0).attr('dis') == 'show') {
                $priceA.eq(0).attr('dis','hide').show()
                        .addClass('active').attr('href','javascript:void(0);').siblings().removeClass('active');
                $priceA.eq(1).attr('dis','show').hide();
            }else{
                $priceA.eq(0).attr('dis','show').hide();
                $priceA.eq(1).attr('dis','hide').show()
                        .addClass('active').attr('href','javascript:void(0);').siblings().removeClass('active');
            };
        }else{
            $(this).addClass('active').attr('href','javascript:void(0);').siblings().removeClass('active');
        };
        var str ="";
        var one = $('.classify-info dl').eq(0).find('.active').attr('rel');
        var two = $('.classify-info dl').eq(1).find('.active').attr('rel');
        var three = $('.classify-info dl').eq(2).find('.active').attr('rel');
        var storage = $('.classify-info dl').eq(3).find('.active').attr('rel');
        var price = $('.classify-left .til a.active').attr('num');
        var key_word = $('#key_word').html();
        var category = $('#category').html();
        var quality = $('#quality').html();
        $.ajax({
            url : '/shopping',
            type : "POST",
            data : {one:one,two:two,three:three,storage:storage,price:price,key_word:key_word,category:category,quality:quality},
            dataType : "json",
            cache:"false",
            timeout:30000,
            success : function(json) {
                $.each(json.data,function(index,arr){
                    str +="<div class=\"floor-shop\">";
                    str +="<div class=\"shop-img\">";
                    str +="<a href=\"/shopping_details/?product_id=";
                    str +=arr.product_id;
                    str +="\"><img src="+arr.product_img+" alt=\"\"></a>";
                    str +="</div>";
                    str +="<div class=\"shop-info\">";
                    str +="<a href=\"/shopping_details/?product_id=";
                    str +=arr.product_id;
                    str +="\" class=\"name\"><span>";
                    str += arr.product_name;
                    str += "</span></a>";
                    str +="<div class=\"price\">";
                    str += '￥'+arr.price +'/'+arr.unit;
                    str +="</div>";
                    str +="</div>";
                    str +="</div>";
                });
                $('.shopping-box').html(str);
                $('.pagination').jPages({
                    containerID  : "shopping-box",
                    perPage      : 12,
                    startPage    : 1,
                    startRange   : 1,
                    midRange     : 5,
                    endRange     : 1
                });
                if($('.shopping-box .floor-shop').length == 0){
                    $('.shopping-box').html('<img src="./resource/img/shopping_no_shop.png"/>');
                }
            }
        });
    });
</script>
</body>
</html>